<template>
  <div class="container">
    <el-row type="flex" :gutter="10" justify="space-between" style="height: 35px;">
      <el-col :span="6">
        <el-radio-group v-model="radio" @change="changeRadio">
          <el-radio label="0">主码流</el-radio>
          <el-radio label="1">子码流</el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="6">
        <!-- 用户名下拉菜单 -->
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="组 织 机 构：">
            <el-select
              style="min-width: 145px"
              v-model="form.groupingValue"
              placeholder="请选择"
              filterable
              clearable
              @change="loginHuabao"
            >
              <el-option
                v-for="item in form.userList"
                :key="item.CLIENT_NO"
                :label="item.USERNAME"
                :value="item.CLIENT_NO"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-tabs v-model="carTabsValue" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in carTabs"
        :key="item.did"
        :label="item.title"
        :name="item.did"
      >
      </el-tab-pane>
    </el-tabs>
    <iframe
      id="dialogVisibleCCTViframe"
      :src="url"
      frameborder="0"
      width="100%"
      height="90%"
    ></iframe>
  </div>
</template>
<script>
export default {
  data () {
    return {
      radio: '0',
      axiosNew: null,
      jsession: '',
      carTabsValue: '',
      carTabs: [],
      url: '',
      form: {
        userList: [],
        groupingValue: '',
      },
    }
  },
  created () {
    if (localStorage.getItem('VIDEO_UID') === '0'){
        this.$message.warning('当前账号不支持视频监控')
        return;
      }
    this.axiosNew = this.$axios.create({
      baseURL: 'http://111.160.78.62:88/', //这是基础url
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      transformRequest: [function (data) {
        // Do whatever you want to transform the data
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }]
    });
    // this.loginHuabao()
  },
  mounted () {
    this.getInfoList()
  },
  methods: {
    async getInfoList () {
      var url = 'Vehicle/GetVideoLoginInfo?ClientNo=' + localStorage.getItem('LOGIN_NAME')
      // var url = 'Vehicle/GetVideoLoginInfo?ClientNo=kljsd' //+ localStorage.getItem('LOGIN_NAME')
      let { data } = await this.$Http.get(url)
      this.form.userList = data
      this.form.groupingValue = data[0].CLIENT_NO
      this.loginHuabao()
    },
    async loginHuabao () {
      var screeningData = this.form.userList.filter(item => item.CLIENT_NO === this.form.groupingValue)[0]
      console.log(screeningData)

      // var url = 'http://111.160.78.62:88/StandardApiAction_logout.action?jsession='+this.jsession
      // let { data } = await this.$Http.get(url)
      // console.log(data)
      // if (data.result == 0) {
      //   this.getCarOnlineReturn()
      // }else{
      //   this.$message.error('视频账号连接异常');
      // }
            
      const that = this;
      this.axiosNew.post('StandardApiAction_login.action', {
        account: screeningData.用户名,
        password: screeningData.密码
        // account: 'fqjs',
        // password: 'fqjs'
      })
        .then(function (response) {
          console.log('登录' + screeningData.用户名);
          console.log(response.data);
          // {result: 0, jsession: "86f3d85c-a196-4496-8b7e-27d50edd1783", account_name: "admin", JSESSIONID: "86f3d85c-a196-4496-8b7e-27d50edd1783"}
          if (response.data.result == 0) {
            // console.log(response.data.jsession)
            that.$message({
              message: screeningData.USERNAME + '视频账户登录成功',
              type: 'success'
            });

            that.jsession = response.data.jsession
            // that.getCarList()
            that.getCarOnlineReturn()
          } else {
            // 提示失败信息
            that.$message({
              type: 'error',
              message: response.data.message
            })
          }
        });
    },
    // async getCarList () {
    //   const that=this;
    //   this.axiosNew.post('StandardApiAction_queryUserVehicle.action', {
    //     jsession: this.jsession
    //   })
    //     .then(function (response) {
    //       console.log(response.data);
    //       if (response.data.result == 0) {
    //         that.carTabs = response.data.vehicles
    //       } else {
    //         this.$message.error('视频车辆列表获取异常');
    //       }
    //     });
    // },
    async getCarOnlineReturn () {
      const that = this;
      this.axiosNew.post('StandardApiAction_getDeviceOlStatus.action', {
        jsession: this.jsession,
        // devIdno: sim
      })
        .then(function (response) {
          if (response.data.result == 0) {
            console.log('response.data.onlines');
            console.log(response.data.onlines);
            var arrCar = []
            for (var i = response.data.onlines.length - 1; i >= 0; i--) {
              var item = response.data.onlines[i]
              if (item.online == 0) {
                // arrCar.splice(i, 1);
                item.title = item.vid + '（离线）'
                arrCar.push(item)
              } else {
                item.title = item.vid + '（在线）'
                arrCar.unshift(item)
              }
            }
            // that.carTabs = arrCar
            // that.carTabsValue = arrCar[0].did
            // that.handleClick({ index: 0 }, null)
            if (arrCar.length == 0) {
              this.$message.warning('当前暂无在线车辆');
              // that.carTabs = [{nm : '空'}]
            } else {
              that.carTabs = arrCar
              // that.carTabsValue = arrCar[0].did
              that.handleClick({ index: 0 }, null)
            }
          } else {
            this.$message.error('该车辆当前为离线状态');
          }
        });
    },
    handleClick (tab, event) {
      this.carTabsValue = this.carTabs[tab.index].did
      this.url = 'http://111.160.78.62:88/808gps/open/player/video.html?lang=zh&channel=5&devIdno=' + this.carTabsValue + '&account=' + localStorage.getItem('VIDEO_UID') + '&password=' + localStorage.getItem('VIDEO_PWD')
      if (this.radio === '0') {
        this.url += '&stream=0'
      } else {
        this.url += '&stream=1'
      }
      console.log('handleClick' + tab)
      console.log(this.url)
    },
    changeRadio () {
      this.url = 'http://111.160.78.62:88/808gps/open/player/video.html?lang=zh&channel=5&devIdno=' + this.carTabsValue + '&account=' + localStorage.getItem('VIDEO_UID') + '&password=' + localStorage.getItem('VIDEO_PWD')
      if (this.radio === '0') {
        this.url += '&stream=0'
      } else {
        this.url += '&stream=1'
      }
      console.log('changeRadio')
      console.log(this.url)
    }

  }
}
</script>
<style>
.container {
  height: calc(100% - 40px);
  /* height: 100%; */
}
.el-tabs__item {
  font-size: 16px;
}
</style>